<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<!--@thymesVar id="user" type="ru.tbcarus.spendingsb.model.User"-->
<!--@thymesVar id="u" type="ru.tbcarus.spendingsb.model.User"-->
<head>
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <title>Пользователи</title>
    <div th:replace="~{fragments/headTag :: headTag}"></div>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
        crossorigin="anonymous"></script>
<script th:src="@{/js/util.js}"></script>
<script th:src="@{/js/chbx.js}"></script>
<nav th:replace="~{fragments/bodyHeader :: bodyHeader}"></nav>
<div class="jumbotron pt-4 p-5 bg-light">
    <div class="container">
        <h3 class="text-center">Пользователи</h3>
        <button class="btn btn-top mb-2" th:onclick="|window.location.href = '@{users/create}'|">
            Добавить
        </button>
        <table class="table table-striped" id="datatable">
            <thead>
            <tr>
                <th>Имя</th>
                <th>Почта</th>
                <th>Роли</th>
                <th>Активный</th>
                <th>Бан</th>
                <th>Удалить</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="u : ${users}">
                <td>
                    <a th:id="name-+${u.id}" th:class="${u.enabled} ? 'active': (${u.banned} ? 'banned' : 'inactive')"
                       th:href="'users/'+${u.id}" th:text="${u.name}"></a>
                </td>
                <td>
                    <div th:id="email-+${u.id}" th:class="${u.enabled} ? 'active': (${u.banned} ? 'banned' : 'inactive')"
                         th:text="${u.email}"></div>
                </td>
                <td>
                    <div th:id="roles-+${u.id}" th:class="${u.enabled} ? 'active': (${u.banned} ? 'banned' : 'inactive')"
                         th:text="${u.roles}"></div>
                </td>
                <td>
                    <input type="checkbox" th:checked="${u.enabled}" th:id="enable-+${u.id}"
                           th:onclick="activeCheckbox([[${u.id}]])" th:disabled="${u.banned}">
                </td>
                <td>
                    <input type="checkbox" th:checked="${u.banned}" th:id="ban-+${u.id}"
                           th:onclick="banCheckbox([[${u.id}]])">
                </td>
                <td><a th:href="'users/delete?id='+${u.id}" th:class="${u.enabled} ? 'active': (${u.banned} ? 'banned' : 'inactive')">
                    <div th:id="del-+${u.id}">
                        Удалить
                    </div>
                </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--    copyright-->
<div th:replace="~{fragments/footer :: copy}"></div>
</body>
</html>